<template>
  <label>
    <input 
      class="input-box" 
      type="checkbox" 
      :name="name" 
      :value="value" 
      @change="change"
    />
    <slot></slot>
  </label>
</template>
<script>
import {Tools} from '../lib/tools'
export default {
  data() {
    return {
      checkedValData: this.checkedVal
    }
  },
  watch: {
    checkedVal(value) {
      this.checkedValData = value
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    checkedVal: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    change(e) {
      if (e.target.checked) {
        this.checkedValData.push(e.target.defaultValue)
      } else {
        this.checkedValData.splice(this.checkedValData.indexOf(e.target.defaultValue), 1)
      }
      this.$emit('on-change', this.checkedValData)
    }
  }
}
</script>
<style lang="less" scoped>
.input-box{
  display: none;
}
</style>
